<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="../inc/meta.jsp" %>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <%@ include file="../inc/css.jsp" %>
    <%@ include file="../inc/js.jsp" %>
</head>

<body class="childrenBody">
<form class="layui-form" id="masterListForm">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="请输入搜索的内容"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addMaster_btn">添加用户</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
            </div>
        </form>
    </blockquote>
    <table id="masterList" lay-filter="masterList"></table>

    <!--操作-->
    <script type="text/html" id="masterListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
</form>
</body>

<script>
    var parentListHtml = '';
    layui.use(['form', 'layer', 'table'], function () {
        var layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            table = layui.table;

        //用户列表
        var tableIns = table.render({
            elem: '#masterList',
            url: 'backend/master/getData',
            cellMinWidth: 95,
            page: true,
            height: "full-125",
            limits: [10, 15, 20, 25],
            limit: 10,
            id: "masterListTable",
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'roleName', title: '类型', minWidth: 100, align: "center"},
                {field: 'account', title: '账号', minWidth: 100, align: "center"},
                {field: 'name', title: '姓名', minWidth: 100, align: "center"},
                {field: 'mobile', title: '手机号', minWidth: 100, align: "center"},
                {
                    field: 'sex', title: '性别', align: 'center', templet: function (d) {
                        return d.sex === 0 ? "男" : "女";
                    }
                },
                {field: 'createTime', title: '注册时间', align: 'center', minWidth: 150},
                {title: '操作', minWidth: 90, templet: '#masterListBar', fixed: "right", align: "center"}
            ]]
        });

        getRoleList();

        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click", function () {
            if ($(".searchVal").val() != '') {
                table.reload("masterListTable", {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        keyWord: $(".searchVal").val()  //搜索的关键字
                    }
                })
            } else {
                layer.msg("请输入搜索的内容");
            }

            getRoleList();
        });

        function getRoleList() {
            $.post("common/roleList", {
                parentId: 0
            }, function (result) {
                parentListHtml = '';

                for (var i = 0; i < result.length; i++) {
                    parentListHtml += '<option value="' + result[i].id + '">' + result[i].name + '</option>';
                }
            });
        }

        //添加用户
        function addMaster() {
            var index = layui.layer.open({
                title: "添加用户",
                type: 2,
                content: "backend/master/show",
                success: function (layero, index) {
                    var win = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                    layui.layer.getChildFrame('body', index).find("#roleList").html(parentListHtml);
                    win.form.render();

                    setTimeout(function () {
                        layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            });
            layui.layer.full(index);
            window.sessionStorage.setItem("index", index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        }

        // 编辑用户
        function modifyMaster(edit) {
            var index = layui.layer.open({
                title: "编辑用户",
                type: 2,
                content: "backend/master/show",
                success: function (layero, index) {
                    var win = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象

                    var body = layui.layer.getChildFrame('body', index);
                    if (edit) {
                        body.find("#userId").val(edit.id);
                        body.find("#account").val(edit.account);
                        body.find("#name").val(edit.name);
                        body.find("#mobile").val(edit.mobile);
                        body.find("#roleList").html(parentListHtml);
                        body.find("#roleList").val(edit.roleId);
                        body.find("input[name='sex'][value='" + edit.sex + "']").prop("checked", true);
                        win.form.render();
                    }
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            });
            layui.layer.full(index);
            window.sessionStorage.setItem("index", index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        }

        $(".addMaster_btn").click(function () {
            addMaster();
        });

        //批量删除
        $(".delAll_btn").click(function () {
            var checkStatus = table.checkStatus('masterListTable'),
                data = checkStatus.data,
                ids = '';
            if (data.length > 0) {
                for (var i in data) {
                    ids += data[i].id + ',';
                }
                layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post("backend/master/batchDel", {
                        ids: ids
                    }, function (result) {
                        if (result === 1) {
                            layer.msg("批量删除用户成功");
                            tableIns.reload();
                            layer.close(index);
                        } else {
                            layer.msg("批量删除用户失败");
                        }
                    });
                })
            } else {
                layer.msg("请选择需要删除的用户");
            }
        });

        //列表操作
        table.on('tool(masterList)', function (obj) {
            var layEvent = obj.event,
                data = obj.data;
            if (layEvent === 'edit') { // 编辑
                modifyMaster(data);
            } else if (layEvent === 'del') { // 删除
                layer.confirm('确定删除此用户？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post("backend/master/delete", {
                        id: data.id  //将需要删除的newsId作为参数传入
                    }, function (result) {
                        if (result === 1) {
                            layer.msg("删除成功");
                            tableIns.reload();
                            layer.close(index);
                        } else {
                            layer.msg("删除失败");
                        }
                    });
                });
            }
        });

    })
</script>

</html>